<template>
    <view class="app">
        <load :ready="ready"></load>
		<view class="list">
			<view class="item" v-for="(item, index) in list" :key="item.id">
				<view class="text">
					类型：
					<u-tag  v-if="item.type== 7" type="success" :text="item.type_name" mode="light" /> 
					<u-tag  v-else-if="item.type== 2" type="info" :text="item.type_name" mode="light" /> 
					<u-tag  v-else type="primit" :text="item.type_name" mode="light" /> 
					
				</view> 
		
				<view class="text">
					 操作人: {{item.dname}}
				</view>
				<view class="text">
					 时间: {{item.create_time}}
				</view>
				<view class="text">{{item.info | setInfo}}</view>
				<!-- <view class="text">{{item.info}}</view> -->
				<view class="text">瓶码: {{item.bottle_code}} <text  @click="handleItem(item)" class="color">点击查看更多</text></view>
			</view>
			
		</view>	
		
		<list-tip :notData="listTip.notData" :isPage="listTip.isPage" :isLoading="listTip.isLoading">
		    <u-empty slot="notdata" text="暂无数据"  margin-top="100"></u-empty>
		</list-tip>
		
		
		<u-popup v-model="showBottle" mode="bottom" height="600" border-radius="32">
			<view class="send-popup">
				<view class="btn-close">
					<u-icon name="close" @click="showBottle = false" size="30"></u-icon>
				</view>
				<view class="title">
					瓶码
				</view>
				<view class="item">
					<view class="tag-wrap">
						<view class="tag" v-for="(item, index) in info.bottle_code2" >
							<u-tag :text="item" type="info " />
						
						</view>	
					</view>
				</view>
			</view>
		</u-popup>
		
		
	</view>
</template>

<script>
import { mapState, mapActions, mapMutations, mapGetters } from 'vuex';
import { mixinsBase } from '@/common/js/mixins';
let that;
export default {
    mixins: [mixinsBase],
    components: {},
    data() {
        return {
			btnStyle:this.$config.btnStyle,
			billType: 1,
			customStyle:{
				fontSize: '13px',
				padding: '6px 15px',
				margin: '0 0 0 8px'
			},
			listTip: {},
			list:[],
			info:{},
			showDel: false,
			bottleList:[],
			showBottle:false,
			id:null,
        };
    },
    onLoad(o) {
		this.id = o.id;
        that = this;
    },
    onReady() {
    },
    onShow() {
       this.$list.init(this);
       this.getList();
    },
    onUnload() {
        that = null;
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function() {
        // this.getInit(data=>{
        //      uni.stopPullDownRefresh();
        //      common.showTip('刷新成功');
        // });
    },

    /**
     * 页面上拉触底事件的处理函数
     */
   onReachBottom: function() {
   	this.$list.onReachBottom(this)
   },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function() {
        //       return {
        // 	// path,
        // 	imageUrl:config.shareImg,
        // 	// title
        // }
    },
    methods: {
		handleItem(item){
			this.info = item;
			this.showBottle = true;
		},
		async getList() {
		    let listTip = this.listTip;
		    let res = {};
		    let params = {
		        pageNum: listTip.p,
		        pageSize: listTip.size,
				site_id:this.id,
		    };
		    try {
		        res = await this.$api.logDetail(params);
		    } catch (e) {
		        uni.hideLoading();
		        console.log('err', e);
		    }
		    if (res.data.code == this.$config.RESOK) {
		        let list = res.data.data.data || [];
				list.forEach(item=>{
					item.bottle_code2 = item.bottle_code.split(',')
				})
		        let setdata = this.$list.normalData(list, this);
				console.log(setdata);
		        this.list = setdata.list;
		        this.listTip = setdata.listTip;
		        if (setdata.list.length >= res.data.total && listTip.p > 1 || !list.length) {
		            this.$list.notdata(this);
		        } 
		    } 
		},
        ...mapActions([])
    },
	filters:{
		setInfo(data){
			let index = data.indexOf('详细信息')
			if(index == -1) {
				return '详细信息:' + data
			}
			return data.slice(index, data.length);
		},
	},
    computed: {
        ...mapState({
            userInfo: 'userInfo'
        })
    }
};
</script>

<style scoped lang="scss">
page {
    background-color: #F8FAFD;
}
.list{
	.item{
		background: #fff;
		margin-bottom: 12px;
		padding: 20rpx 30rpx;
		border: 2px solid #fff;
		overflow: hidden;
		position: relative;
		&:nth-last-child(1){
			margin-bottom: 0;
		}
	}
	.text{
		color: #666;
		font-size: 13px;
		padding: 1px 0;
	}
}
.color{
	color: $color;
}

.send-popup{
		padding: 20rpx 30rpx;
		position: relative;
		.btn-close{
			position: absolute;
			right: 30rpx;
			top: 20rpx;
		}
		.title{
			text-align: center;
			font-size: 16px;
			margin-bottom: 20rpx;
		}
		.item{
			margin-bottom: 20rpx;
		}
		.label{
			font-size: 14px;
			margin-bottom: 6px;
		}
		.btnbox{
			padding-top: 30rpx;
		}
	}
	.tag-wrap{
		display: flex;
		flex-wrap: wrap;
		line-height: 1.5;
		.tag{
			display: inline-block;
			margin-right: 4px;
			margin-bottom: 4px;
		}
	}
</style>
